<script lang="ts" setup>
import { NDivider, NTabPane, NTabs, NSwitch } from "naive-ui";
import { SunnyOutline, MoonOutline } from "@vicons/ionicons5";
import { RenderIcon } from "@/components/icon/RenderIcon";
import { useDesignStore } from "@/stores/module/design";
import { toRefs } from "vue";
import { computed } from "vue";
import LabelSwitch from "./LabelSwitch.vue";
import { useI18n } from "@/hooks/useI18n";

const { t } = useI18n();

const { setIsDark, setInverted } = useDesignStore();
const { inverted, menuMode } = toRefs(useDesignStore());

const tabOption = [
  {
    name: "sunny",
    icon: SunnyOutline,
  },
  {
    name: "moon",
    icon: MoonOutline,
  },
];

const isDisabled = computed(() => menuMode.value === "horizontal");
</script>

<template>
  <NDivider> {{ t("design.themeMode") }} </NDivider>
  <NTabs type="segment" animated :on-update:value="setIsDark">
    <NTabPane v-for="item in tabOption" :name="item.name" :tab="RenderIcon(item.icon)" />
  </NTabs>
  <Transition name="sider-inverted">
    <LabelSwitch :label="t('design.darkSidebar')" :value="inverted" :disabled="isDisabled" @change="setInverted()" />
  </Transition>
</template>
